/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Embed, IconCheckSquare, IconSquare, RCell, Table, TableBody, TableFoot, TableHead, TableRow, Text,
} from "customize-easy-ui-component";
import {FadeImage} from "../../comp/FadeImage";
import Img_Ma from "../../images/MA.png";
import Img_Fbpi from "../../images/FBPI.png";
import Img_ReportNoQR from "../../images/reportNoQR.png";
import {AttentionPoint} from "../common/rarelyVary";
import {DirectLink} from "../../routing/Link";

/**报告封面的头部区域： 紧凑型
 * */
export const ReportFirstPageHeadAllNmbbm= ({theme , rep, mbbm } :{theme: any, rep:any, mbbm:string}
) => {
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height: '11rem',
    }}>
      <div css={{overflow: 'hidden'}}>
        <Embed css={{width: "155px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
          <FadeImage src={Img_Ma}/>
        </Embed>
        <Text css={{position: 'relative', top: '-1.1rem', fontSize: '0.9rem'}}>181320110160</Text>
      </div>
      <div>
        <Embed css={{width: "140px", margin: "auto"}} width={10} height={10}>
          <FadeImage src={Img_ReportNoQR}/>
        </Embed>
      </div>
      <div css={{overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
        {/*<Text variant="h6" css={{fontSize: '0.8rem'}}>{mbbm}</Text>*/}
        <Embed css={{width: "120px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
          <FadeImage src={Img_Fbpi}/>
        </Embed>
        <div css={{
          display: 'flex',
          "@media (min-width:690px),print and (min-width:538px)": {
            marginRight: "1rem"
          }
        }}
        ><Text variant="h5">报告编号：</Text>
          <Text variant="h5" css={{textDecoration: 'underline'}}>{rep?.isp?.no}</Text>
        </div>
      </div>
    </div>
  </React.Fragment>;
};
//没有MA;
export const ReportFirstPageHeadNmaNmbbm= ({theme , rep } :{theme: any, rep:any}
) => {
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height: '11rem',
    }}>
      <div css={{overflow: 'hidden'}}>
        <Embed css={{width: "155px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
        </Embed>
      </div>
      <div>
        <Embed css={{width: "140px", margin: "auto"}} width={10} height={10}>
          <FadeImage src={Img_ReportNoQR}/>
        </Embed>
      </div>
      <div css={{overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
        {/*<Text variant="h6" css={{fontSize: '0.8rem'}}>{mbbm}</Text>*/}
        <Embed css={{width: "120px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
          <FadeImage src={Img_Fbpi}/>
        </Embed>
        <div css={{
          display: 'flex',
          "@media (min-width:690px),print and (min-width:538px)": {
            marginRight: "1rem"
          }
        }}
        ><Text variant="h5">报告编号：</Text>
          <Text variant="h5" css={{textDecoration: 'underline'}}>{rep?.isp?.no}</Text>
        </div>
      </div>
    </div>
  </React.Fragment>;
};

/**报告封面的头部区域：
 * 紧凑型
 * 其中MA  mbbm都没有
 * */
export const ReportFirstPageHeadNmaNmbm= ({theme , rep, mbbm,nofbp,op } :{theme: any, rep:any, mbbm?:string,nofbp?:boolean,op?:boolean}
) => {
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height: '11rem',
    }}>
      <div/>
      <div>
        <Embed css={{width: "140px", margin: "auto"}} width={10} height={10}>
          <FadeImage src={Img_ReportNoQR}/>
        </Embed>
      </div>
      <div css={{overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
        {nofbp? <div css={{height: "6rem"}}/>
            :
            <Embed css={{width: "120px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
              <FadeImage src={Img_Fbpi}/>
          </Embed>
        }
        <div css={{
          display: 'flex',
          "@media (min-width:690px),print and (min-width:538px)": {
            marginRight: "1rem"
          }
        }}
        ><Text variant="h5">{op?'记录':'报告'}编号：</Text>
          <Text variant="h5" css={{textDecoration: 'underline'}}>{rep?.isp?.no}</Text>
        </div>
      </div>
    </div>
  </React.Fragment>;
};


/**封面概要；
 * */
export const 首页设备概况Ct= ({theme, orc, rep } :{theme: any, orc:any, rep:any}
) => {
  return <Table fixed={ ["20%","%"] }  css={ {borderCollapse: 'collapse'} }>
    <TableBody rheight={40}>
      <TableRow>
        <RCell css={{border:'none'}}>使用单位：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.使用单位 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>产品名称：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc?.设备名称 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>产品编（批）号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.出厂编号 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>检验日期：</RCell>
        {orc.检验日期1? <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期1} 至 {orc.检验日期}</CCell>
            :
            <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期}</CCell>
        }
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>监察识别码：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.监察识别码 || '／'}</CCell>
      </TableRow>
    </TableBody>
  </Table>;
};

export const 注意事项Cont= ({comply, rep} :{comply: any, rep: any}
) => {
  //中间组件只带了第一行的内容 1．本报告{comply}。<br/>  参数telurl：是否显示报检方式；最后一行跟随的！
  return <AttentionPoint rep={rep} comply={comply} telurl >
    2．本报告应当由计算机打印输出，或者用钢笔、签字笔填写，字迹应当工整，修改无效。<br/>
    3．本报告无检验、编制、审核、批准人员签字和检验机构的核准证号、检验专用章或者公章无效。<br/>
    4．本报告书本检验报告一式三份：一份交建设单位；一份交施工单位；一份监检单位存档。<br/>
    5．受检单位对本报告结论如有异议，请在收到报告书之日起15日内，向检验机构提出书面意见。<br/>
    6．根据《中华人民共和国特种设备安全法》，使用单位应于检验合格有效期届满前1个月向检验机构提出定期检验申请。<br/>
    7．有关检验检测数据未经允许，施工、使用单位不得擅自向社会发布信息。<br/>
    8．
  </AttentionPoint>;
};

/**管道的 附页：分项 顺序安排；
 * */
export const 检验项目表Cot = ({theme, orc, rep}: { theme: any, orc: any, rep: any }
) => {
  let projectseq=0;
  //【表格列宽度】  JSON.parse(orc?._tblFixed??'[]')  ;  @ 表格拉拽  ：动态开发测试的 ["6.5%","12%","36%","6.5%","10%","%"] ;
  return <>
    <div css={{display: 'flex', justifyContent: 'space-between'}}>
      <Text>设备代码：{orc.设备代码}</Text>
      <Text>报告编号：{rep.isp.no}</Text>
    </div>
    <Table fixed={ ["9%", "%", "15%", "24%"] } css={{borderCollapse: 'collapse'}}  tight  miniw={800}>
      <TableBody>
        <TableRow>
          <CCell>产品名称</CCell>
          <CCell>{orc.设备名称}</CCell>
          <CCell>产品编（批）号</CCell>
          <CCell>{orc.出厂编号}</CCell>
        </TableRow>
      </TableBody>
    </Table>
    <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
      <Table fixed={ ["5%", "%", "43%", "19%"] } css={{borderCollapse: 'collapse'}}  tight  miniw={800}>
        <TableHead>
          <TableRow>
            <CCell>序号</CCell>
            <CCell>检验项目</CCell>
            <CCell>检验结果</CCell>
            <CCell>备注</CCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {orc?.Projects?.length > 0 ?
              <>{orc.Projects.map((prj: any, i: number) => {
                if(prj?.na) return null;
                projectseq++;
                return (
                    <DirectLink key={i} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList?from=${i}#ProjectList`}>
                      <TableRow>
                        <CCell component="th" scope="row">{projectseq}</CCell>
                        <Cell>
                          <div css={{display: 'flex', alignItems: 'center'}}>
                            {prj?.do ? <IconCheckSquare size='sm'/> :
                                <IconSquare size='sm'/>}&nbsp;{prj?.name}
                          </div>
                        </Cell>
                        <CCell>{prj?.res??'／'}</CCell>
                        <CCell>{prj?.memo}</CCell>
                      </TableRow>
                    </DirectLink>
                );
              })
              }
              </>
              :
              <TableRow><CCell colSpan={5}><Text variant="h2" >烦请首先初始化项目表！</Text></CCell></TableRow>
          }
        </TableBody>
      </Table>
    </DirectLink>
    <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
  </>;
};

/**证书的头部区域： 紧凑型 高度固定
 * */
export const CertFirstPageHead= ({theme , rep, mbbm } :{theme: any, rep:any, mbbm:string}
) => {
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height: '4rem',
    }}>
      <div css={{overflow: 'hidden'}}>
        <Embed css={{width: "155px",margin: "auto",top: '-0.15rem'}} width={78} height={35}>
          <FadeImage src={Img_Fbpi}/>
        </Embed>
      </div>
      <div css={{overflow: 'hidden'}}>
        <Text variant="h6" css={{fontSize:'0.8rem'}}>{mbbm}</Text>
      </div>
    </div>
  </React.Fragment>;
};

/**最后签字行的处理  Table 2列的；
 * 【注意】不可用 <TailMenRowIspCheck orc={orc} rep={rep} /> </TailMenRowIspCheck>    #出现报错的！
 *若采用如下TableFoot：缺点= 栏目colSpan宽度布局 跟随主表内容，调整很麻烦！ 效果和TableHead类似（多页吸附底部固定位置），但是：最后一页或没跨越页的就没变动！【意义多大】？
 *  <TableFoot>
 *     <TableRow>  <CCell  colSpan={3}></CCell>   <CCell  colSpan={2}></CCell>  </TableRow>
 *  </TableFoot>
 *【可能方案】考虑useElasticTable的折叠动态表格的类似，TableFoot底下直接用flexBox自己画出MenRowIspCheck表格，然后不需要依赖说跟谁的表格的列宽度列数配置，避免复杂关联。
 * */
export const TailMenRowIspCheck= ({ orc, rep, children, href,cap,scap } :
        { orc: any,rep: any,children?: React.ReactNode; href?:string,cap?:string,scap?:string}
) => {
  const nodes=<TableRow>
    <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
      <div><Text>{cap??'检验'}：</Text>    </div>
      <div css={{textAlign: 'end'}}><Text >日期</Text>2022-12-31</div>
    </div></CCell>
    <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
      <div><Text >{scap??'审核'}：</Text>  </div>
      <div css={{textAlign: 'end'}}><Text >日期</Text>2021-01-31</div>
    </div></CCell>
  </TableRow>;
  return  <Table fixed={ ["62%","%"]  }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
      <TableBody>
        {children}
        {href ? <DirectLink  href={href}>
                  {nodes}
            </DirectLink>
            :
            nodes
        }
      </TableBody>
    </Table> ;
};
/**@Deprecated
 *太大的局限性! : 只能固定支持2列布局
* */
export const FootMenRowIspCheck= ({ orc, rep, href,cap } : { orc: any,rep: any, href?:string,cap?:string}
) => {
  const nodes=<TableRow >
    <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
      <div><Text>{cap??'检验'}：</Text>    </div>
      <div css={{textAlign: 'end'}}><Text >日期</Text>2022-12-31</div>
    </div></CCell>
    <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
      <div><Text >审核：</Text>  </div>
      <div css={{textAlign: 'end'}}><Text >日期</Text>2021-01-31</div>
    </div></CCell>
  </TableRow>;
  return  <TableFoot>
      {href ? <DirectLink  href={href}>
            {nodes}
          </DirectLink>
          :
          nodes
      }
    </TableFoot>;
};
/**问题：表尾的位置，在跨页打印的时刻，很可能拆分文字重叠打印到了尾巴区域【一个字体的一半高度位置处于tr边线点的】比较难看了，下面的表尾可能遮盖掉！同样的表头跨页重复的就没有发现这个问题。
 * 承压经常有底部的人员条： 自适应更好的，避免配置复杂性。
关联表格组件的代码 const height=rheight? rheight : ( tableSectionType === "TableHead" ? (vtight? 25 : 31) : (vtight? 33 : 49) );
 只能表格一行的。
【最好不要使用这个】打印分页时刻，文字的一半重叠打印到了尾巴区域；表头表尾都会预留空间的！！ 浏览器问题？
* */
export const FootMenRow= ({ orc, rep, href,cap,scap,span,jm,jd,cm,cd} :
    { orc: any,rep: any, href?:string,cap?:string,scap?:string,span:number,jm?:any[]|any,cm?:any,jd?:string,cd?:string}
) => {
  const jmRender=jm && <>{ Array.isArray(jm)?
      <>{jm.map((m: any, k: number) => <React.Fragment key={k}>
           {0!==k && ','}&nbsp;{m}
          </React.Fragment>)
        }</>
      :
      jm
    }</>;
  const jymens=jmRender? jmRender : '检验人';
  const nodes=<TableRow ><CCell colSpan={span}>
    <div css={{
      display: 'flex',
      width: '-webkit-fill-available',
      height: '-webkit-fill-available',
      justifyContent: 'flex-start',
      alignItems: 'stretch',
      minHeight: 'inherit',
      gap: 0,
      "td:has(&)": {
        padding: 'unset !important',
        height: 'inherit',
      },
    }}>
      <div css={{
        display: 'inline-flex',
        flexGrow: 1,
        maxWidth: '100%',
        boxSizing: 'border-box',
        overflowWrap: 'anywhere',
        whiteSpace: 'initial',
        minHeight: '33px',
        flex: '1 1 62%',
      }}>
          <div css={{
            height: '100%',
            width: '100%',
            display: 'flex',
            justifyContent: 'space-between',
            alignContent: 'space-between',
            alignItems: 'center'
          }}>
            <div><Text>{cap ?? '检验'}：</Text>{jymens}</div>
            <div css={{textAlign: 'end'}}><Text>日期</Text>{jd? jd : '2024-12-31'}</div>
          </div>
      </div>
      <div css={{
        display: 'inline-flex',
        flexGrow: 1,
        maxWidth: '100%',
        borderLeft: '1px solid',
        boxSizing: 'border-box',
        overflowWrap: 'anywhere',
        whiteSpace: 'initial',
        minHeight: '33px',
        flex: '1 1 38%',
      }}>
          <div css={{
            height: '100%',
            width: '100%',
            display: 'flex',
            justifyContent: 'space-between',
            alignContent: 'space-between',
            alignItems: 'center'
          }}>
            <div><Text>{scap ?? '审核'}：</Text>{cm? cm : '审核人'}</div>
            <div css={{textAlign: 'end'}}><Text>日期</Text>{cd? cd : '2025-01-31'}</div>
          </div>
      </div>
    </div>
  </CCell></TableRow>;
  return <TableFoot>
    {href ? <DirectLink href={href}>
          {nodes}
        </DirectLink>
        :
        nodes
    }
  </TableFoot>;
};
/**@Deprecated
 * 最后签字行的处理  Table 2列的；
 *@property mends: 4个预留位置的render Node;
 * */
export const TailMensIspCheck = ({mends, children, href, cap}: {
                                   mends: any[],
                                   children?: React.ReactNode;
                                   href?: string,
                                   cap?: string
                                 }
) => {
  const nodes = <TableRow>
    <CCell>
      <div css={{
        height: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        alignContent: 'space-between',
        alignItems: 'flex-start'
      }}>
        <div><Text>{cap ?? '检验'}：</Text>{mends[0]}</div>
        <div css={{textAlign: 'end'}}><Text>日期</Text>{mends[1]}</div>
      </div>
    </CCell>
    <CCell>
      <div css={{
        height: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        alignContent: 'space-between',
        alignItems: 'flex-start'
      }}>
        <div><Text>审核：</Text>{mends[2]}</div>
        <div css={{textAlign: 'end'}}><Text>日期</Text>{mends[3]}</div>
      </div>
    </CCell>
  </TableRow>;
  return <Table fixed={["62%", "%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
    <TableBody>
      {children}
      {href ? <DirectLink href={href}>
            {nodes}
          </DirectLink>
          :
          nodes
      }
    </TableBody>
  </Table>;
};

